<template>
  <div class="app-container p-4 bg-gray-50 min-h-screen">
    <!-- 查询表单 -->
    <div class="bg-white rounded-lg shadow-md p-5 mb-6 transform transition-all duration-300 hover:shadow-lg">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="手机号">
          <el-input
            v-model="searchObj.mobile"
            placeholder="手机号"
            class="w-48"
            clearable
          />
        </el-form-item>

        <el-form-item label="用户类型">
          <el-select
            v-model="searchObj.userType"
            placeholder="请选择"
            clearable
            class="w-48"
          >
            <el-option label="投资人" value="1"/>
            <el-option label="借款人" value="2"/>
          </el-select>
        </el-form-item>

        <el-form-item label="用户状态">
          <el-select
            v-model="searchObj.status"
            placeholder="请选择"
            clearable
            class="w-48"
          >
            <el-option label="正常" value="1"/>
            <el-option label="锁定" value="0"/>
          </el-select>
        </el-form-item>

        <el-button
          type="primary"
          icon="el-icon-search"
          @click="fetchData"
          class="transition-all duration-200 hover:scale-105"
        >
          查询
        </el-button>

        <el-button
          type="default"
          @click="resetData"
          class="transition-all duration-200 hover:scale-105"
        >
          清空
        </el-button>
      </el-form>
    </div>

    <!-- 列表 -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden transform transition-all duration-300 hover:shadow-xl">
      <el-table
        :data="list || []"
        border
        stripe
        class="w-full"
        :header-cell-style="{background: '#f5f7fa', color: '#606266', fontWeight: '600'}"
      >
        <el-table-column label="#" width="60" align="center">
          <template slot-scope="scope">
            <span class="text-gray-600 font-medium">{{ (page - 1) * limit + scope.$index + 1 }}</span>
          </template>
        </el-table-column>

        <el-table-column label="用户类型" width="120" align="center">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.userType === 1"
              type="success"
              size="small"
              effect="dark"
              class="px-3 py-1 rounded-full text-sm"
            >
              投资人
            </el-tag>
            <el-tag
              v-else-if="scope.row.userType === 2"
              type="warning"
              size="small"
              effect="dark"
              class="px-3 py-1 rounded-full text-sm"
            >
              借款人
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="mobile" label="手机号" align="center"/>
        <el-table-column prop="name" label="用户姓名" align="center"/>
        <el-table-column prop="idCard" label="身份证号" align="center"/>
        <el-table-column prop="integral" label="用户积分" align="center"/>
        <el-table-column label="注册时间" width="160" align="center">
          <template slot-scope="scope">
            {{ formatDateTime(scope.row.createTime) }}
          </template>
        </el-table-column>

        <el-table-column label="绑定状态" width="120" align="center">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.bindStatus === 0"
              type="warning"
              size="small"
              effect="dark"
              class="px-3 py-1 rounded-full text-sm"
            >
              未绑定
            </el-tag>
            <el-tag
              v-else-if="scope.row.bindStatus === 1"
              type="success"
              size="small"
              effect="dark"
              class="px-3 py-1 rounded-full text-sm"
            >
              已绑定
            </el-tag>
            <el-tag
              v-else
              type="danger"
              size="small"
              effect="dark"
              class="px-3 py-1 rounded-full text-sm"
            >
              绑定失败
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="用户状态" width="120" align="center">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.status === 0"
              type="danger"
              size="small"
              effect="dark"
              class="px-3 py-1 rounded-full text-sm"
            >
              锁定
            </el-tag>
            <el-tag
              v-else
              type="success"
              size="small"
              effect="dark"
              class="px-3 py-1 rounded-full text-sm"
            >
              正常
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="240">
          <template slot-scope="scope">
            <div class="flex justify-center space-x-2">
              <el-button
                v-if="scope.row.status == 1"
                type="danger"
                size="small"
                @click="lock(scope.row.id, 0)"
                class="transition-all duration-200 hover:scale-105"
              >
                <i class="el-icon-lock mr-1"></i>锁定
              </el-button>
              <el-button
                v-else
                type="success"
                size="small"
                @click="lock(scope.row.id, 1)"
                class="transition-all duration-200 hover:scale-105"
              >
                <i class="el-icon-unlock mr-1"></i>解锁
              </el-button>
              <el-button
                type="primary"
                size="small"
                @click="showLoginRecord(scope.row.id)"
                class="transition-all duration-200 hover:scale-105"
              >
                <i class="el-icon-document mr-1"></i>登录日志
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 空状态 -->
      <div v-if="list && list.length === 0" class="py-20 flex flex-col items-center justify-center">
        <p class="text-gray-500">暂无数据</p>
      </div>

      <!-- 加载状态 -->
      <div v-else-if="loading" class="py-20 flex flex-col items-center justify-center">
        <el-loading-spinner class="text-primary text-2xl"></el-loading-spinner>
        <p class="text-gray-500 mt-2">数据加载中...</p>
      </div>
    </div>

    <!-- 分页组件 -->
    <div class="flex justify-between items-center mt-6">
      <div class="text-gray-600">
        共 <span class="text-primary font-medium">{{ total }}</span> 条记录
      </div>
      <el-pagination
        :current-page="page"
        :total="total"
        :page-size="limit"
        :page-sizes="[10, 20, 50, 100]"
        layout="sizes, prev, pager, next, jumper"
        @size-change="changePageSize"
        @current-change="changeCurrentPage"
        class="el-pagination is-background"
      />
    </div>


    <!-- 用户登录日志 -->
    <el-dialog title="用户登录日志" :visible.sync="dialogTableVisible">
      <el-table :data="loginRecordList" border stripe>
        <el-table-column type="index" />
        <el-table-column prop="ip" label="IP" />
        <el-table-column prop="createTime" label="登录时间" />
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
import userInfoApi from '@/api/core/user-info'

export default {
  data() {
    return {
      list: null, // 数据列表
      total: 0, // 数据库中的总记录数
      page: 1, // 默认页码
      limit: 10, // 每页记录数
      searchObj: {}, // 查询条件
      loginRecordList: [], // 会员登录日志
      dialogTableVisible: false, // 对话框是否显示
      loading: false // 加载状态
    }
  },

  created() {
    // 当页面加载时获取数据
    this.fetchData()
  },

  methods: {
    async fetchData() {
      this.loading = true
      try {
        const response = await userInfoApi.getPageList(this.page, this.limit, this.searchObj)
        this.list = response.data.pageModel.records
        this.total = response.data.pageModel.total
      } catch (error) {
        this.$message.error('获取数据失败，请稍后重试')
        console.error('获取数据失败:', error)
      } finally {
        this.loading = false
      }
    },

    // 每页记录数改变
    changePageSize(size) {
      this.limit = size
      this.fetchData()
    },

    // 改变页码
    changeCurrentPage(page) {
      this.page = page
      this.fetchData()
    },

    // 锁定和解锁
    async lock(id, status) {
      try {
        const response = await userInfoApi.lock(id, status)
        this.$message.success(response.message)
        this.fetchData()
      } catch (error) {
        this.$message.error('操作失败，请稍后重试')
        console.error('锁定/解锁失败:', error)
      }
    },

    // 根据id查询会员日志记录
    async showLoginRecord(id) {
      this.dialogTableVisible = true
      try {
        const response = await userInfoApi.getuserLoginRecordTop50(id)
        this.loginRecordList = response.data.list
      } catch (error) {
        this.$message.error('获取登录日志失败，请稍后重试')
        console.error('获取登录日志失败:', error)
      }
    },

    // 重置表单
    resetData() {
      this.searchObj = {}
      this.fetchData()
    },

    // 格式化日期时间
    formatDateTime(dateTimeStr) {
      if (!dateTimeStr) return ''

      // 解析日期时间字符串
      const date = new Date(dateTimeStr)

      // 获取年月日时分秒
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      const seconds = String(date.getSeconds()).padStart(2, '0')

      // 返回格式化后的字符串
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    }
  }
}
</script>

<style scoped lang="scss">
/* 表格行悬停效果 */
.el-table__body tr:hover > td {
  background-color: #f8fafc !important;
}

/* 分页样式优化 */
.el-pagination {
  .el-pager li {
    &.active {
      background-color: #409eff;
      color: #fff;
    }
  }
}

/* 对话框样式 */
.login-record-dialog {
  .el-dialog__header {
    background-color: #f5f7fa;
    border-bottom: 1px solid #ebeef5;
    padding: 15px 20px;
  }

  .el-dialog__title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
  }

  .el-dialog__body {
    padding: 20px;
  }
}

/* 按钮样式优化 */
.el-button {
  &.is-primary {
    background-color: #409eff;
    border-color: #409eff;
  }

  &.is-success {
    background-color: #67c23a;
    border-color: #67c23a;
  }

  &.is-danger {
    background-color: #f56c6c;
    border-color: #f56c6c;
  }

  &.is-warning {
    background-color: #e6a23c;
    border-color: #e6a23c;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .app-container {
    padding: 15px;
  }

  .el-form-item {
    margin-bottom: 10px;
  }

  .el-table {
    .el-table__header {
      display: none;
    }

    .el-table__row {
      display: flex;
      flex-direction: column;
      border-bottom: 1px solid #ebeef5;
      padding: 10px 0;

      td {
        border: none !important;
        padding: 5px 10px !important;

        &:before {
          content: attr(data-label);
          font-weight: bold;
          margin-right: 5px;
          color: #606266;
        }
      }
    }
  }
}
</style>
